<template>
	<div class="step-wrap">
		<div :class="['stepClass', prevDisabled ? 'disabledClass' : 'allowClass']" @click="onPrev">
			<img class="prev" :src="prevDisabled ? grayImg : blackImg" alt="" />
			<span class="tip">上一个</span>
		</div>
		<div :class="['stepClass', nextDisabled ? 'disabledClass' : 'allowClass']" @click="onNext">
			<img class="next" :src="nextDisabled ? grayImg : blackImg" alt="" />
			<span class="tip">下一个</span>
		</div>
	</div>
</template>

<script setup>
	import grayImg from '@/assets/images/arrow-gray.png'
	import blackImg from '@/assets/images/arrow-black.png'

	const props = defineProps({
		prevDisabled: {
			type: Boolean,
			default: true
		},
		nextDisabled: {
			type: Boolean,
			default: true
		}
	})
	const emits = defineEmits(['prev', 'next'])

	const onPrev = () => {
		!props.prevDisabled && emits('prev')
	}
	const onNext = () => {
		!props.nextDisabled && emits('next')
	}
</script>

<style lang="less" scoped>
	.allowClass {
		color: #fff;
		cursor: pointer;
		.prev,
		.next {
			color: #000;
		}
	}
	.disabledClass {
		color: #bbb;
		cursor: not-allowed;
		.prev,
		.next {
			color: #bbb;
		}
	}

	.stepClass {
		position: relative;
		user-select: none;
		.prev {
			width: 60px;
			margin-bottom: 3px;
			transform: rotate(180deg);
			& + .tip {
				bottom: 0;
			}
		}
		.next {
			width: 60px;
			margin-top: 3px;
			& + .tip {
				top: 0;
			}
		}
	}

	.tip {
		position: absolute;
		left: 0;
		width: 60px;
		text-align: center;
		line-height: 28px;
		font-size: 12px;
		transform: scale(0.8);
	}
</style>
